<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="IMEI号" prop="imei">
        <el-input
          v-model="queryParams.imei"
          placeholder="请输入IMEI号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="固件版本号" prop="fvn">
        <el-input
          v-model="queryParams.fvn"
          placeholder="请输入固件版本号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="硬件版本号" prop="hv">
        <el-input
          v-model="queryParams.hv"
          placeholder="请输入硬件版本号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['device:iot:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['device:iot:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['device:iot:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['device:iot:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="iotList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="index" width="50" label="序号" align="center" />
      <el-table-column label="IMEI号" align="center" prop="imei" />
      <el-table-column label="固件版本号" align="center" prop="fvn" />
      <el-table-column label="硬件版本号" align="center" prop="hv" />
      <el-table-column label="断路器状态" align="center" prop="pwrSta" width="120">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.pwrSta === 0" type="default">关闭</el-tag>
          <el-tag v-else type="success">开启</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="450">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleView(scope.row)"
          >查看</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['device:iot:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-upload"
            @click="handleUpdateOTA(scope.row)"
            v-hasPermi="['device:iot:updateOTA']"
          >更新OTA</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-time"
            @click="handleSetTime(scope.row)"
            v-hasPermi="['device:iot:setTime']"
          >设置时间</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-time"
            @click="handleSetHeartupTime(scope.row)"
            v-hasPermi="['device:iot:setHeartupTime']"
          >设置心跳时间</el-button>
          <el-button
            size="mini"
            type="text"
            :icon="newPwrSta === 0 ? 'el-icon-open' : 'el-icon-turn-off'"
            @click="handleTogglePwrSta(scope.row)"
            v-hasPermi="['device:iot:setPwrSta']"
          >{{ newPwrSta === 0 ? '开启' : '关闭' }}</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['device:iot:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改物联网模块对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="IMEI号" prop="imei">
          <el-input v-model="form.imei" placeholder="请输入IMEI号" />
        </el-form-item>
        <el-form-item label="固件版本号" prop="fvn">
          <el-input v-model="form.fvn" placeholder="请输入固件版本号" />
        </el-form-item>
        <el-form-item label="硬件版本号" prop="hv">
          <el-input v-model="form.hv" placeholder="请输入硬件版本号" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 查看物联网模块详情对话框 -->
    <el-dialog title="物联网模块详情" :visible.sync="viewOpen" width="1000px" append-to-body :close-on-click-modal="false" custom-class="iot-detail-dialog">
      <div class="detail-content">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="ID">{{ viewForm.id }}</el-descriptions-item>
          <el-descriptions-item label="IMEI号">{{ viewForm.imei }}</el-descriptions-item>
          <el-descriptions-item label="固件版本号">{{ viewForm.fvn }}</el-descriptions-item>
          <el-descriptions-item label="硬件版本号">{{ viewForm.hv }}</el-descriptions-item>
        </el-descriptions>
        
        <el-divider content-position="center">详细信息</el-divider>
        
        <el-tabs v-model="activeTab" type="border-card" @tab-click="handleTabClick" class="detail-tabs">
          <el-tab-pane label="心跳记录" name="heartbeat">
            <!-- 心跳记录查询条件 -->
            <el-form :model="heartbeatQueryParams" ref="heartbeatQueryForm" size="small" :inline="true" class="tab-query-form">
              <el-form-item label="开始时间" prop="startTime">
                <el-date-picker
                  v-model="heartbeatQueryParams.startTime"
                  type="datetime"
                  placeholder="选择开始时间"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="width: 200px;"
                />
              </el-form-item>
              <el-form-item label="结束时间" prop="endTime">
                <el-date-picker
                  v-model="heartbeatQueryParams.endTime"
                  type="datetime"
                  placeholder="选择结束时间"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="width: 200px;"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleHeartbeatQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetHeartbeatQuery">重置</el-button>
              </el-form-item>
            </el-form>
            
            <div class="table-container">
              <el-table v-loading="heartbeatLoading" :data="heartbeatList" :row-class-name="rowIotModuleHeartbeatIndex" height="300">
                <el-table-column type="index" width="50" label="序号" align="center" />
                <el-table-column label="心跳记录时间" prop="heartbeatTime" width="240" />
                <el-table-column label="ICCID卡号" prop="iccid" width="200" />
                <el-table-column label="4G信号强度" prop="dfs" width="150" />
                <el-table-column label="供电输出状态" prop="pwrSta" width="150" >
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.pwrSta === 0" type="default">关闭</el-tag>
                    <el-tag v-else type="success">开启</el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            
            <pagination
              v-show="heartbeatTotal>0"
              :total="heartbeatTotal"
              :page.sync="heartbeatQueryParams.pageNum"
              :limit.sync="heartbeatQueryParams.pageSize"
              @pagination="getHeartbeatList"
            />
          </el-tab-pane>
          
          <el-tab-pane label="操作日志" name="log">
            <!-- 操作日志查询条件 -->
            <el-form :model="logQueryParams" ref="logQueryForm" size="small" :inline="true" class="tab-query-form">
              <el-form-item label="开始时间" prop="startTime">
                <el-date-picker
                  v-model="logQueryParams.startTime"
                  type="datetime"
                  placeholder="选择开始时间"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="width: 200px;"
                />
              </el-form-item>
              <el-form-item label="结束时间" prop="endTime">
                <el-date-picker
                  v-model="logQueryParams.endTime"
                  type="datetime"
                  placeholder="选择结束时间"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="width: 200px;"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleLogQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetLogQuery">重置</el-button>
              </el-form-item>
            </el-form>
            
            <div class="table-container">
              <el-table v-loading="logLoading" :data="logList" :row-class-name="rowLogIndex" height="300">
                <el-table-column type="index" width="50" label="序号" align="center" />
                <el-table-column label="操作时间" prop="opTime" width="180" />
                <el-table-column label="操作类型" prop="opType" width="120" >
                  <template slot-scope="scope">
                    <dict-tag :options="dict.type.iot_module_op" :value="scope.row.opType"/>
                  </template>
                </el-table-column>
                <el-table-column label="操作详情" prop="opData" />
              </el-table>
            </div>
            
            <pagination
              v-show="logTotal>0"
              :total="logTotal"
              :page.sync="logQueryParams.pageNum"
              :limit.sync="logQueryParams.pageSize"
              @pagination="getLogList"
            />
          </el-tab-pane>
          
          <el-tab-pane label="DLT698指令" name="dlt698">
            <!-- DLT698指令查询条件 -->
            <el-form :model="dlt698QueryParams" ref="dlt698QueryForm" size="small" :inline="true" class="tab-query-form">
              <el-form-item label="开始时间" prop="startTime">
                <el-date-picker
                  v-model="dlt698QueryParams.startTime"
                  type="datetime"
                  placeholder="选择开始时间"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="width: 200px;"
                />
              </el-form-item>
              <el-form-item label="结束时间" prop="endTime">
                <el-date-picker
                  v-model="dlt698QueryParams.endTime"
                  type="datetime"
                  placeholder="选择结束时间"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="width: 200px;"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleDlt698Query">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetDlt698Query">重置</el-button>
              </el-form-item>
            </el-form>
            
            <div class="table-container">
              <el-table v-loading="dlt698Loading" :data="dlt698List" :row-class-name="rowDlt698Index" height="300">
                <el-table-column type="index" width="50" label="序号" align="center" />
                <el-table-column label="发送/接收时间" prop="createTime" width="180" />
                <el-table-column label="指令类别" prop="msgType" width="120" >
                  <template slot-scope="scope">
                    <dict-tag :options="dict.type.dlt698_instruct" :value="scope.row.msgType"/>
                  </template>
                </el-table-column>
                <el-table-column label="指令详情" prop="msgData" />
              </el-table>
            </div>
            
            <pagination
              v-show="dlt698Total>0"
              :total="dlt698Total"
              :page.sync="dlt698QueryParams.pageNum"
              :limit.sync="dlt698QueryParams.pageSize"
              @pagination="getDlt698List"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeViewDialog">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 设置心跳时间对话框 -->
    <el-dialog title="设置心跳时间" :visible.sync="setHeartupTimeDialog" width="500px" append-to-body>
      <el-form ref="setHeartupTimeForm" :model="setHeartupTimeParams" :rules="setHeartupTimeRules" label-width="120px">
        <el-form-item label="心跳时间" prop="timeout">
          <el-input v-model="setHeartupTimeParams.timeout" placeholder="请输入心跳时间" type="number" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitSetHeartupTime">确 定</el-button>
        <el-button @click="setHeartupTimeDialog = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listIot, getIot, delIot, addIot, updateIot, updateOTA, setTime, setHeartupTime, setPwrSta, heartbeat } from "@/api/device/iot"
import { listLog } from "@/api/device/log"
import { listLog as listDlt698Log } from "@/api/iot/log"

export default {
  name: "Iot",
  dicts: ['iot_module_op', 'dlt698_instruct'],
  data() {
    return {
      newPwrSta: 0,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 子表选中数据
      checkedIotModuleHeartbeat: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 物联网模块表格数据
      iotList: [],
      // 物联网模块心跳记录表格数据
      iotModuleHeartbeatList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否显示查看弹出层
      viewOpen: false,
      // 查看表单参数
      viewForm: {},
      // 当前激活的tab
      activeTab: 'heartbeat',
      // 操作日志列表
      logList: [],
      // 操作日志总数
      logTotal: 0,
      // 操作日志加载状态
      logLoading: false,
      // 操作日志查询参数
      logQueryParams: {
        pageNum: 1,
        pageSize: 10,
        iotModuleId: null,
        startTime: null,
        endTime: null
      },
      // 心跳记录列表
      heartbeatList: [],
      // 心跳记录总数
      heartbeatTotal: 0,
      // 心跳记录加载状态
      heartbeatLoading: false,
      // 心跳记录查询参数
      heartbeatQueryParams: {
        pageNum: 1,
        pageSize: 10,
        iotModuleId: null,
        startTime: null,
        endTime: null
      },
      // DLT698指令列表
      dlt698List: [],
      // DLT698指令总数
      dlt698Total: 0,
      // DLT698指令加载状态
      dlt698Loading: false,
      // DLT698指令查询参数
      dlt698QueryParams: {
        pageNum: 1,
        pageSize: 10,
        iotModuleId: null,
        startTime: null,
        endTime: null
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        imei: null,
        fvn: null,
        hv: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        imei: [
          { required: true, message: "IMEI号不能为空", trigger: "blur" }
        ],
        fvn: [
          { required: true, message: "固件版本号不能为空", trigger: "blur" }
        ],
        hv: [
          { required: true, message: "硬件版本号不能为空", trigger: "blur" }
        ]
      },
      // 设置心跳时间对话框
      setHeartupTimeDialog: false,
      // 设置心跳时间对话框参数
      setHeartupTimeParams: {
        imei: null,
        timeout: null
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询物联网模块列表 */
    getList() {
      this.loading = true
      listIot(this.queryParams).then(response => {
        this.iotList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        imei: null,
        fvn: null,
        hv: null
      }
      this.iotModuleHeartbeatList = []
      this.resetForm("form")
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm")
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 查看按钮操作 */
    handleView(row) {
      const id = row.id
      getIot(id).then(response => {
        this.viewForm = response.data
        this.viewOpen = true
        // 重置操作日志查询参数
        this.logQueryParams.iotModuleId = id
        this.logQueryParams.pageNum = 1
        // 重置心跳记录查询参数
        this.heartbeatQueryParams.iotModuleId = id
        this.heartbeatQueryParams.pageNum = 1
        // 重置DLT698指令查询参数
        this.dlt698QueryParams.iotModuleId = id
        this.dlt698QueryParams.pageNum = 1
        // 默认加载心跳记录tab
        this.activeTab = 'heartbeat'
        // 加载心跳记录
        this.getHeartbeatList()
      })
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = "添加物联网模块"
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getIot(id).then(response => {
        this.form = response.data
        this.open = true
        this.title = "修改物联网模块"
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateIot(this.form).then(response => {
              this.$modal.msgSuccess("修改成功")
              this.open = false
              this.getList()
            })
          } else {
            addIot(this.form).then(response => {
              this.$modal.msgSuccess("新增成功")
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除物联网模块编号为"' + ids + '"的数据项？').then(function() {
        return delIot(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess("删除成功")
      }).catch(() => {})
    },
	/** 物联网模块心跳记录序号 */
    rowIotModuleHeartbeatIndex({ row, rowIndex }) {
      row.index = rowIndex + 1
    },
    /** 操作日志序号 */
    rowLogIndex({ row, rowIndex }) {
      row.index = rowIndex + 1
    },
    /** 获取操作日志列表 */
    getLogList() {
      if (!this.logQueryParams.iotModuleId) return
      
      this.logLoading = true
      const params = {
        ...this.logQueryParams,
        params: {}
      }
      if (this.logQueryParams.startTime) {
        params.params.startTime = this.logQueryParams.startTime
      }
      if (this.logQueryParams.endTime) {
        params.params.endTime = this.logQueryParams.endTime
      }
      listLog(params).then(response => {
        this.logList = response.rows
        this.logTotal = response.total
        this.logLoading = false
      }).catch(() => {
        this.logLoading = false
      })
    },
    /** 操作日志查询按钮操作 */
    handleLogQuery() {
      this.logQueryParams.pageNum = 1
      this.getLogList()
    },
    /** 操作日志重置按钮操作 */
    resetLogQuery() {
      this.logQueryParams.startTime = null
      this.logQueryParams.endTime = null
      this.logQueryParams.pageNum = 1
      this.getLogList()
    },
    /** 获取心跳记录列表 */
    getHeartbeatList() {
      if (!this.heartbeatQueryParams.iotModuleId) return

      this.heartbeatLoading = true
      const params = {
        ...this.heartbeatQueryParams,
        params: {}
      }
      if (this.heartbeatQueryParams.startTime) {
        params.params.startTime = this.heartbeatQueryParams.startTime
      }
      if (this.heartbeatQueryParams.endTime) {
        params.params.endTime = this.heartbeatQueryParams.endTime
      }
      
      heartbeat(params).then(response => {
        this.heartbeatList = response.rows || response.data || []
        this.heartbeatTotal = response.total || 0
        this.heartbeatLoading = false
      }).catch(() => {
        this.heartbeatLoading = false
      })
    },
    /** 心跳记录查询按钮操作 */
    handleHeartbeatQuery() {
      this.heartbeatQueryParams.pageNum = 1
      this.getHeartbeatList()
    },
    /** 心跳记录重置按钮操作 */
    resetHeartbeatQuery() {
      this.heartbeatQueryParams.startTime = null
      this.heartbeatQueryParams.endTime = null
      this.heartbeatQueryParams.pageNum = 1
      this.getHeartbeatList()
    },
    /** DLT698指令序号 */
    rowDlt698Index({ row, rowIndex }) {
      row.index = rowIndex + 1
    },
    /** 获取DLT698指令列表 */
    getDlt698List() {
      if (!this.dlt698QueryParams.iotModuleId) return
      
      this.dlt698Loading = true
      const params = {
        ...this.dlt698QueryParams,
        params: {}
      }
      
      if (this.dlt698QueryParams.startTime) {
        params.params.startTime = this.dlt698QueryParams.startTime
      }
      if (this.dlt698QueryParams.endTime) {
        params.params.endTime = this.dlt698QueryParams.endTime
      }
      
      listDlt698Log(params).then(response => {
        this.dlt698List = response.rows
        this.dlt698Total = response.total
        this.dlt698Loading = false
      }).catch(() => {
        this.dlt698Loading = false
      })
    },
    /** DLT698指令查询按钮操作 */
    handleDlt698Query() {
      this.dlt698QueryParams.pageNum = 1
      this.getDlt698List()
    },
    /** DLT698指令重置按钮操作 */
    resetDlt698Query() {
      this.dlt698QueryParams.startTime = null
      this.dlt698QueryParams.endTime = null
      this.dlt698QueryParams.pageNum = 1
      this.getDlt698List()
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('device/iot/export', {
        ...this.queryParams
      }, `iot_${new Date().getTime()}.xlsx`)
    },
    /** 更新OTA按钮操作 */
    handleUpdateOTA(row) {
      const imei = row.imei
      updateOTA(imei).then(response => {
        this.$modal.msgSuccess("请求成功")
      })
    },
    /** 设置时间按钮操作 */
    handleSetTime(row) {
      const imei = row.imei
      setTime(imei).then(response => {
        this.$modal.msgSuccess("请求成功")
      })
    },
    /** 设置心跳时间按钮操作 */
    handleSetHeartupTime(row) {
      // 弹出对话框
      this.setHeartupTimeDialog = true
      this.setHeartupTimeParams.imei = row.imei
    },
    /** 提交设置心跳时间 */
    submitSetHeartupTime() {
      this.$refs.setHeartupTimeForm.validate(valid => {
        if (valid) {
          setHeartupTime(this.setHeartupTimeParams.imei, this.setHeartupTimeParams.timeout).then(response => {
            this.$modal.msgSuccess("请求成功")
            this.setHeartupTimeDialog = false
            this.getList()
          })
        }
      })
    },
    /** 切换断路器开关状态 */
    handleTogglePwrSta(row) {
      //const newPwrSta = row.pwrSta === 0 ? 1 : 0
      const actionText = this.newPwrSta === 0 ? '开启' : '关闭'
      const singal = this.newPwrSta === 0 ? 1 : 0
      this.$modal.confirm(`确认${actionText}IMEI号为"${row.imei}"的断路器吗？`).then(() => {
        setPwrSta(row.imei, singal).then(response => {
          this.$modal.msgSuccess(`发送${actionText}指令成功`)
          setTimeout(() => {
            this.getList()
          }, 3000)
          this.newPwrSta = singal
        }).catch(() => {
          this.$modal.msgError(`发送${actionText}指令失败`)
        })
      }).catch(() => {})
    },
    /** 处理tab切换 */
    handleTabClick(tab) {
      if (tab.paneName === 'log') {
        this.getLogList()
      } else if (tab.paneName === 'heartbeat') {
        this.getHeartbeatList()
      } else if (tab.paneName === 'dlt698') {
        this.getDlt698List()
      }
    },
    /** 关闭查看详情对话框 */
    closeViewDialog() {
      this.viewOpen = false
      this.viewForm = {}
      this.activeTab = 'heartbeat'
      this.logList = []
      this.logTotal = 0
      this.logLoading = false
      this.heartbeatList = []
      this.heartbeatTotal = 0
      this.heartbeatLoading = false
      this.dlt698List = []
      this.dlt698Total = 0
      this.dlt698Loading = false
      // 重置查询参数
      this.logQueryParams.startTime = null
      this.logQueryParams.endTime = null
      this.logQueryParams.pageNum = 1
      this.heartbeatQueryParams.startTime = null
      this.heartbeatQueryParams.endTime = null
      this.heartbeatQueryParams.pageNum = 1
      this.dlt698QueryParams.startTime = null
      this.dlt698QueryParams.endTime = null
      this.dlt698QueryParams.pageNum = 1
    }
  }
}
</script>

<style scoped>
.iot-detail-dialog {
  max-height: 90vh;
}

.iot-detail-dialog .el-dialog__body {
  max-height: calc(90vh - 120px);
  overflow-y: auto;
}

.detail-content {
  max-height: 100%;
}

.detail-tabs {
  height: 100%;
}

.detail-tabs .el-tabs__content {
  height: calc(100% - 40px);
}

.table-container {
  margin-bottom: 10px;
}

.table-container .el-table {
  border: 1px solid #ebeef5;
}

.table-container .el-table__body-wrapper {
  overflow-y: auto;
}

.tab-query-form {
  margin-bottom: 15px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.tab-query-form .el-form-item {
  margin-bottom: 10px;
  margin-right: 15px;
}

.tab-query-form .el-form-item:last-child {
  margin-right: 0;
}
</style>
